<template>
  <div class="drawer">
    <!-- 绘制弹框 -->
    <el-drawer destroy-on-close size="50%" :title="`${title}角色`" :visible.sync="drawer" width="100%" @close="btnCancel">
      <!-- 绘制表单 -->
      <el-form ref="form" :model="formData" :rules="formRules" label-width="140px" size="normal" label-position="top">
        <el-row>
          <el-col :span="10">
            <el-form-item prop="name" label="角色名称">
              <el-input v-model="formData.name" class="inputW" />
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="10">
            <el-form-item prop="description" label="角色描述">
              <el-input v-model="formData.description" class="inputW" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="权限标识">
              <el-tree
                ref="tree"
                show-checkbox
                :data="list"
                node-key="id"
                :props="defaultProps"
                empty-text=""
                :highlight-current="true"
                check-on-click-node
                :expand-on-click-node="false"
              />
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="11">
            <!-- <el-form-item label="账号状态">
              <span :class="{ blue: formData.status === 0 }">禁用</span>&nbsp;
              <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />&nbsp;
              <span :class="{ blue: formData.status === 1 }">启用</span>
            </el-form-item> -->
            <el-form-item label="启用状态">
              <el-radio-group v-model="formData.status">
                <el-radio :label="0">禁用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button type="primary" size="small" @click="btnOk">提交</el-button>
        <el-button size="small" @click="drawer=false">取消</el-button>
      </div>
      <!-- <el-row type="flex" justify="end" /> -->
    </el-drawer>
  </div>
</template>

<script>
import { getMenuList } from '@/api/menu'
import { addRoleAPI, getRoleInfoAPI, editRoleInfoAPI } from '@/api/role'
import { transListToTreeData } from '@/utils/index'
export default {
  name: 'UserDialog',
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      drawer: false,
      list: [],
      // 表单数据变量
      formData: {
        description: '',
        menus: [],
        name: '',
        status: 1
      },
      formRules: {
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        login_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, {
        //   pattern 正则表达式
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式不正确',
          trigger: 'blur'
        }],
        password: [{ required: true, min: 6, max: 16, message: '请输入密码', trigger: 'blur' }],
        role_id: [{ required: true }]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 获取标签
    async initData() {
      const res = await getMenuList()
      // console.log(res)
      this.list = transListToTreeData(res.data, 0)
      // console.log(this.list)
    },
    // 添加/修改分类
    async btnOk() {
      // this.formData.id ? await editUserInfo(this.formData) : await addSystemUser(this.formData)
      // this.$message.success(this.formData.id ? '编辑成功' : '添加成功')
      // this.drawer = false
      // this.$emit('updateList')
      const treeDataList = [...this.$refs.tree.getHalfCheckedKeys(), ...this.$refs.tree.getCheckedKeys()]
      this.formData.menus = treeDataList
      // console.log(this.formData)
      await this.$refs.form.validate()
      this.formData.id ? await editRoleInfoAPI(this.formData) : await addRoleAPI(this.formData)
      this.$message.success(this.formData.id ? '编辑成功' : '添加成功')
      this.drawer = false
      this.$emit('updateList')
    },
    btnCancel() {
      this.formData = {
        description: '',
        menus: [],
        name: '',
        status: ''
      }
      this.$refs.tree.setCheckedKeys([])
      this.$refs.form.clearValidate()
    },
    // 表单回显
    async reviewInfo(id) {
      this.drawer = true
      const res = await getRoleInfoAPI(id)
      this.formData = res.data
      // let imgArray = (this.formData.subImages || "").split(',');
      const arr = (this.formData.menus).split(',')
      this.formData.menus = arr
      console.log(this.formData.menus)
      // this.$refs.tree.setCheckedKeys(this.formData.menus)
      this.formData.menus.forEach(value => {
        this.$refs.tree.setChecked(value, true, false)
      })
    },
    // 修改分类数据
    async editRow(id) {
      // 1.获取该行数据
      // 2.加工处理数据
      // 3.赋给表单变量
      // 4.打开弹框

    }
  }
}
</script>

<style scoped>
.blue {
  color: skyblue
}
::v-deep .el-drawer__body {
  padding-left: 20px;
}
::v-deep .el-drawer__header {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.demo-drawer__footer {
  position: absolute;
  border-top: 1px solid #f0f0f0;
  bottom: 10px;
  right: 10px;
}
</style>
